<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            max-width: 600px;
            margin: auto;
            padding: 40px;
        }
        .context {
            line-height: 30px;
            font-size: 20px;
        }
        .tip {
            line-height: 60px;
            color: #ccc;
        }
        .practice {
            resize: none;
            outline: 0 none;
            width: 100%;
            min-height: 300px;
            padding: 10px;
            font-size: 20px;
        }
        .err {
            color: red;
        }
        .ok {
            color: #0c0;
        }
    </style>
</head>
<body>
    <script src="./js/words.js"></script>
    <div class="box">
        <p class="context"></p>
        <p class="tip">在下面输入上面的文字，正确会显示绿色，错误会显示红色</p>
        <textarea class="practice"></textarea>
        <p class="total"></p>
        <script>
            var index = Math.floor(Math.random() * words.length)
            var str = words[index];
            var context = document.querySelector('.context')
            var practice = document.querySelector('.practice')
            var total = document.querySelector('.total')

            context.innerHTML = str;
            total.innerText = `总共0字正确, 0 字错误`;

            practice.addEventListener('input',function(){
                var template = [];
                var count = 0;
                for(var i =0; i < str.length; i++){
                    var char = str.charAt(i);
                    if(this.value.charAt(i)){
                        if(char === this.value.charAt(i)){
                            template.push('<span class="ok">'+ char +'</span>')
                            count++;
                        }else {
                            template.push('<span class="err">'+ char +'</span>')
                        }
                    }else {
                        template.push(char)
                    }
                }
                context.innerHTML = template.join('');
                total.innerText = `总共 ${count} 字正确 , ${practice.value.length - count} 字错误`;
            })
        </script>
    </div>
</body>
</html>